<%@ page isELIgnored="false" language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@include file="common.jsp"%>
<title>教育</title>
<style type="text/css">      
</style>             
</head>
<body class="paddingTop49px">
    <%@include file="commonHeader.jsp"%>
    <input type="hidden" value="教育" id="selectedMenu">
	<input type="hidden" value="${fn:length(moduleShowDetailList)}" id="moduleShowDetailList">
    <c:if test="${! empty bannerUrlList}">
		<div class="swiper-container detailTopBanner">
			<div class="swiper-wrapper">     
				<c:forEach var="bannerUrl" items="${bannerUrlList}">
				<div class="swiper-slide">
					<img src="${bannerUrl}"> 
					<div class="swiper-lazy-preloader"></div>
				</div>
				</c:forEach>
			</div>
			<div class="swiper-button-next">
				<i class="swiperIconfont icon-youjiantou"></i>
			</div>
			<div class="swiper-button-prev">
				<i class="swiperIconfont icon-zuojiantou"></i>
			</div>
		</div> 
	</c:if>
	<!-- 当标签大于1，也就是一个页面中的文章数超过一篇时，才显示阴影线上面的title和tag标签 -->
	<div class="detailMainTitle cnDetailMainTitle">
	    <div class="color333">${moduleShow.title}
			<c:if test="${empty moduleShow.title}">
			${moduleShow.enTitle}
			</c:if>     
		</div>
		<c:if test="${! empty moduleShowDetailList}">
			<c:if test="${fn:length(moduleShowDetailList)>1}">
			    <div class="tagsBox clearFix">
					<c:forEach items="${moduleShowDetailList}" var="moduleShowDetail">
				    <div class="tag margin20px">${moduleShowDetail.articleTime} ${moduleShowDetail.cnLabel}</div>
					</c:forEach>
				</div>
			</c:if>  
		</c:if>  
	</div> 
    <!-- 当标签大于1，也就是一个页面中的文章数超过一篇时，才显示阴影线上面的title和tag标签 -->
    <div class="detailMainTitle enDetailMainTitle">
        <div class="color333">${moduleShow.enTitle}
			<c:if test="${empty moduleShow.enTitle}">
			${moduleShow.title}
			</c:if>
		</div>  
	    <c:if test="${! empty moduleShowDetailList}">
			<c:if test="${fn:length(moduleShowDetailList)>1}">
			    <div class="tagsBox margin20px clearFix">
					<c:forEach items="${moduleShowDetailList}" var="moduleShowDetail">
				    <div class="tag">${moduleShowDetail.enArticleTime} ${moduleShowDetail.enLabel}</div>
					</c:forEach> 
				</div> 
			</c:if>
		</c:if>  
	</div>
	<div class="container cnContainer">
		<div class="tabsBox">
			<c:forEach items="${moduleShowDetailList}" var="moduleShowDetail">
				<div class="tab clearFix">  
					<div class="clearFix compositionBox">
						<c:if test="${! empty moduleShowDetailList}">
						    <c:if test="${fn:length(moduleShowDetailList)>1}">
								<div class="floatl compositionContent">
									<div class="bigFont">
									    ${moduleShowDetail.cnTitle}
									    <c:if test="${empty moduleShowDetail.cnTitle}">
									        ${moduleShowDetail.enTitle}
									    </c:if>         
									</div>
									<div class="smallFont">${moduleShowDetail.articleTime}</div>
								</div>
							</c:if>
						</c:if>
						<div class="floatr">
							${moduleShowDetail.cnArticle}
							<c:if test="${empty moduleShowDetail.cnArticle}">
						        ${moduleShowDetail.enArticle}
						    </c:if>
						</div>
					</div>
				</div>
			</c:forEach>
	    </div>
	</div>
	<div class="container enContainer">
		<div class="tabsBox">
			<c:forEach items="${moduleShowDetailList}" var="moduleShowDetail">
				<div class="tab clearFix">
					<div class="clearFix compositionBox">
						<c:if test="${! empty moduleShowDetailList}">
						    <c:if test="${fn:length(moduleShowDetailList)>1}">
								<div class="floatl compositionContent">
									<div class="bigFont">
									    ${moduleShowDetail.enTitle}
									    <c:if test="${empty moduleShowDetail.enTitle}">
									        ${moduleShowDetail.cnTitle}
									    </c:if>         
									</div>
									<div class="smallFont">${moduleShowDetail.articleTime}</div>
								</div>
							</c:if>
						</c:if>   
						<div class="floatr">       
						    ${moduleShowDetail.enArticle}
						    <c:if test="${empty moduleShowDetail.enArticle}">
						        ${moduleShowDetail.cnArticle}
						    </c:if> 
						</div>
					</div>
				</div>
			</c:forEach>
		</div>
	</div>
	<%@include file="commonFooter.jsp"%>  
</body>   
<script>
$(function(){
    <%--console.log("--------------------------------------------------------------列表数据:", ${moduleShowDetailList});--%>
	commonInit.swiperDetailPageTopImg();
	// console.log($("#moduleShowDetailList").val(),"==========")
	if($("#moduleShowDetailList").val()>1){
        $(".tagsBox").find("div:eq(0)").click();
    }else{
        $(".tabsBox").find("div:eq(0)").show();
    }
})
//JS实现选项卡切换
$(".tag").click(function(){
	 var nth=$(this).index();
     $(".cnDetailMainTitle").find(".tag").eq(nth).addClass("selectedTag").siblings(".tag").removeClass("selectedTag");
     $(".enDetailMainTitle").find(".tag").eq(nth).addClass("selectedTag").siblings(".tag").removeClass("selectedTag");
     $(".enContainer").find(".tab").eq(nth).addClass("show").siblings(".tab").removeClass("show");
     $(".cnContainer").find(".tab").eq(nth).addClass("show").siblings(".tab").removeClass("show");
});
	/* $(".video1").attr("src","http://static.cakeboss.com.cn/GSpatrick201711.mp4");
	$(".video2").attr("src","http://static.cakeboss.com.cn/GSpinkhassov201804.mp4");
	$(".video3").attr("src","http://img.light-society.com/GSEducationClass-2018%7C12%7C15.mp4"); */
</script>
</html>           